<template>
    <div class="app-container">
        <section>
            <div class="contentBox">
                <div class="title">
                    <span>{{$route.query.title}}</span>
                </div>
                <div class="content">
                    <el-form ref="form" :model="form"  class="form"  label-width="110px" :rules="rules">
                        <el-form-item label="门店名称" style="width:100%"  prop="title">
                            <el-input v-model="form.title" style="width:100%" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="位置"  style="width:100%" prop="position">
                            <el-input v-model="form.position" style="width:100%" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label=" " style="width:100%"  prop="parking1">
                            <div id="map" class="map" style="width: 100%;height: 300px;">
                                <el-input
                                id="keywords"
                                class="search"
                                autocomplete="off"
                                v-model="search1"
                                size="small"
                                placeholder="地址搜索"></el-input>
                            </div>
                        </el-form-item>
                        <el-form-item label="停车推荐"  style="width:100%" prop="parking">
                            <el-input v-model="form.parking" style="width:100%" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label=" " style="width:100%"  prop="parking1">
                            <div id="map2" class="map" style="width: 100%;height: 300px;">
                                <el-input
                                id="keywords2"
                                class="search"
                                autocomplete="off"
                                v-model="search2"
                                size="small"
                                placeholder="地址搜索"></el-input>
                            </div>
                        </el-form-item>
                        <el-form-item label="门店图片"  style="width:100%" ref="images"  prop="images">
                             <VsUploading
                                width="120px"
                                @verify="verify('images',$event)"
                                v-model="form.images"></VsUploading>
                        </el-form-item>
                        <el-form-item label="管家微信图片"  style="width:100%" ref="qr_code"  prop="qr_code">
                             <VsUploading
                                width="120px"
                                @verify="verify('qr_code',$event)"
                                v-model="form.qr_code"></VsUploading>
                        </el-form-item>
                        <el-form-item label="营业时间"  style="width:100%;" required>

                            <div class="banci-time">
                                <el-form-item prop="start_time" style="flex:1;">
                                    <el-time-select
                                        placeholder="起始时间"
                                        v-model="form.start_time"
                                        :picker-options="{
                                            start: '00:00',
                                            step: '00:30',
                                            end: '23:30'
                                        }">
                                    </el-time-select>
                                </el-form-item>
                                <span class="text-center" style="padding:0 10px;white-space:nowrap;flex:1;">至{{isCi}}</span>
                                <el-form-item prop=" end_time" style="flex:1;">
                                    <el-time-select
                                        placeholder="结束时间"
                                        v-model="form.end_time"
                                        value-format="HH:mm:ss"
                                        :picker-options="{
                                            start: '00:00',
                                            step: '00:30',
                                            end: '23:30',
                                            time:form.end_time,
                                        }">
                                            <!-- minTime: form.startTime -->
                                    </el-time-select>
                                </el-form-item>
                            </div>
                        </el-form-item>
                        <el-form-item label="评分"  style="width:100%" prop="score">
                            <el-input-number v-model="form.score" :precision="1" :step="0.1" :min="0.1" :max="5"></el-input-number>
                        </el-form-item>
                        <el-form-item label="负责人姓名"  style="width:100%" prop="name">
                            <el-input v-model="form.name" placeholder="请输入" class="w100"></el-input>
                        </el-form-item>
                        <el-form-item label="固定电话"  style="width:100%" prop="tel">
                            <el-input v-model="form.tel" placeholder="请输入座机" class="w100"></el-input>
                        </el-form-item>
                        <el-form-item label="移动电话" style="width:100%" prop="mobile">
                            <el-input v-model="form.mobile" placeholder="请输入手机" class="w100"></el-input>
                        </el-form-item>
                        <el-form-item label="门店状态" style="width:100%;" prop="status">
                            <div style="height:40px">
                                <el-radio v-model="form.status" :label="1">营业中</el-radio>
                                <el-radio v-model="form.status" :label="0">暂停营业</el-radio>
                            </div>
                        </el-form-item>
                        <el-form-item label="公司" >
                            <el-select
                                v-model="form.company_id"
                                placeholder="请选择">
                                <el-option
                                v-for="item in getCompanyList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div style="margin-top:40px">
                        <el-button type="primary" style="width:143px" @click="save">确定</el-button>
                        <el-button style="width:143px" @click="$router.go(-1)">取消</el-button>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>
<script>
import VsUploading from '../../components/VsUploading'
export default {
    components:{
        VsUploading
    },
    data() {
        var url = (rule, value, callback) => {
            // 图片验证
            if (!this.form.images.length) { //hasFmt设置为true/false
                callback(new Error("请上传门店图片!"));
            } else {
                callback();
            }
        }
        var url2 = (rule, value, callback) => {
            // 图片验证
            if (!this.form.qr_code) { //hasFmt设置为true/false
                callback(new Error("请上管家微信图片!"));
            } else {
                callback();
            }
        }
        return {
            form: {
               time_type:0,
               title:'',//门店名称
               position:'',//位置
               longitude:116.397428,//经度,
               latitude:39.90923,//维度
               parking:'',//停车推荐
               parking_longitude:116.397428,//停车经度
               parking_latitude:39.90923,//停车维度
               images:[],//图片 逗号拼接
               start_time:'',//营业开始时间
               end_time:'',//营业结束时间
               name:'',//负责人姓名
               tel:'',//固定电话
               mobile:'',//移动电话
               score:'',//评分
               qr_code:'',
               status:'',//门店状态
               company_id:''
            },
            map:{},
            map2:{},
            search1:'',
            search2:'',
            getCompanyList:[],
            rules: {
                status:{ required: true, message: '请选择门店状态', trigger: 'change' },
                images:{required: true, validator: url },
                qr_code:{required: true, validator: url2 },
                score:{ required: true, message: '请输入评分', trigger: 'blur' },
                title:{ required: true, message: '请输入门店名称', trigger: 'blur' },
                position:{ required: true, message: '请输入门店位置', trigger: 'blur' },
                parking:{ required: true, message: '请输入停车推荐位置', trigger: 'blur' },
                start_time:{ required: true, message: '请选择营业开始时间', trigger: 'blur' },
                end_time:{ required: true, message: '请选择营业结束时间', trigger: 'blur' },
                name:{ required: true, message: '请输入负责人姓名', trigger: 'blur' },
                // tel:{ required: true, message: '请输入固定电话', trigger: 'blur' },
                mobile:{ required: true, message: '请输入移动电话', trigger: 'blur' },
            },
            point:[116.397428, 39.90923],
            roleList: [],
            details:{}
        }
    },
    async created() {
        if (this.$route.query.id) {
            this.form.id = this.$route.query.id
            await this.storegetGoods();
        }
        this.$route.meta.title = this.$route.query.title;
        this.$nextTick(()=>{
            this.initGDmap();
            this.initGDmap2();
        })
        this.getCompany();
    },
    computed:{
        isCi(){
            let {start_time,end_time} = this.form;
            if(end_time&&start_time>end_time){
                return '次日';
            }
            return '';
        }
    },
    mounted() {

    },
    beforeDestroy(){
        this.map.destroy();
    },
    methods: {
        // 获取公司列表
        async getCompany() {
            let { code, data } = await this.$Http.getCompany({ is_all: 1 });
            if (code) {
                this.getCompanyList = data;
            }
        },
        async storegetGoods(){
            let {code,data} = await this.$Http.storegetGoods({id:this.form.id});
            if(code){
                // data.start_time.
                // this.form = data;
                let end_time = data.end_time.split(":");
                let start_time = data.start_time.split(":");
                data.end_time = end_time[0] + ":" + end_time[1];
                data.start_time = start_time[0] + ":" + start_time[1];
                this.form = data;
            }
        },
        //初始化地图
		initGDmap(){
            let {longitude,latitude} = this.form;
            this.map = new AMap.Map("map", {
                resizeEnable: true,
                zoom: 16,//地图显示的缩放级别
                center: [longitude, latitude]
            });
            console.log( this.map,' this.map');
            var marker = new AMap.Marker({
                map: this.map,
                position: [longitude, latitude]
            });
            //为地图注册click事件获取鼠标点击出的经纬度坐标
            var clickEventListener = this.map.on('click',(e)=> {
                this.form.longitude = e.lnglat.getLng();
                this.form.latitude = e.lnglat.getLat();

                let lnglatXY = [e.lnglat.getLng(),e.lnglat.getLat()]; //已知点坐标
                marker.setPosition(lnglatXY);
                this.regeocoder(lnglatXY);
            });
            AMap.plugin('AMap.Autocomplete',()=>{
                var auto = new AMap.Autocomplete({
                    input: "keywords"
                });
                AMap.event.addListener(auto, "select", (e)=> {
                    if (e.poi && e.poi.location) {
                        this.map.setZoom(15);
                        this.map.setCenter(e.poi.location);

                        this.form.longitude = e.poi.location.lng;
                        this.form.latitude =  e.poi.location.lat;

                        let lnglatXY = [e.poi.location.lng,e.poi.location.lat]; //已知点坐标
                        marker.setPosition(lnglatXY);
                        this.regeocoder(lnglatXY);
                    }
                });//注册监听，当选中某条记录时会触发
            })
        },
        //停车初始化地图
		initGDmap2(){
            let {parking_longitude,parking_latitude} = this.form;
            this.map2 = new AMap.Map("map2", {
                resizeEnable: true,
                zoom: 16,//地图显示的缩放级别
                center: [parking_longitude, parking_latitude]
            });
            var marker = new AMap.Marker({
                map: this.map2,
                position: [parking_longitude, parking_latitude]
            });
            //为地图注册click事件获取鼠标点击出的经纬度坐标
            var clickEventListener = this.map2.on('click',(e)=> {
                this.form.parking_longitude = e.lnglat.getLng();
                this.form.parking_latitude = e.lnglat.getLat();

                let lnglatXY = [e.lnglat.getLng(),e.lnglat.getLat()]; //已知点坐标
                marker.setPosition(lnglatXY);
                this.regeocoder(lnglatXY,2);
            });
            AMap.plugin('AMap.Autocomplete',()=>{
                var auto = new AMap.Autocomplete({
                    input: "keywords2"
                });
                AMap.event.addListener(auto, "select", (e)=> {
                    if (e.poi && e.poi.location) {
                        this.map2.setZoom(15);
                        this.map2.setCenter(e.poi.location);

                        this.form.parking_longitude = e.poi.location.lng;
                        this.form.parking_latitude =  e.poi.location.lat;

                        let lnglatXY = [e.poi.location.lng,e.poi.location.lat]; //已知点坐标
                        marker.setPosition(lnglatXY);
                        this.regeocoder(lnglatXY,2);
                    }
                });//注册监听，当选中某条记录时会触发
            })
        },
        //逆地理编码
        regeocoder(lnglatXY,type) {
            AMap.plugin('AMap.Geocoder',()=>{
                var geocoder = new AMap.Geocoder({
                    radius: 1000,
                    extensions: "all"
                });
                geocoder.getAddress(lnglatXY, (status, result)=> {
                    if (status === 'complete' && result.info === 'OK') {
                        var address = result.regeocode.formattedAddress; //返回地址描述
                        if(type==2){
                            this.form.parking = address;
                        }else
                            this.form.position = address;
                    }
                });
                // var marker = new AMap.Marker({  //加点
                //     map: this.map,
                //     position: lnglatXY
                // });
                if(type==2){
                    this.map2.setFitView();
                }else
                    this.map.setFitView();
            })
        },
        verify(hasFmt,sta){
            if(sta){
                this.$refs[hasFmt].validate();
            }else this.$refs[hasFmt].clearValidate();
        },
        add(){
            this.list.push({})
        },
        dele(index){
            this.list.splice(index,1)
        },
        save() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    let obj = Object.assign({},this.form)
                    obj.images = obj.images.join(',');
                    obj.time_type = this.isCi?1:0;
                    let {code,data} = await this.$Http.storesetStore(obj)
                    if (code) {
                        if (this.form.id) {
                            this.$message.success('编辑成功')
                        } else {
                            this.$message.success('添加成功')
                        }
                        this.$router.go(-1)
                    }
                } else {
                    return false;
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.banci-time{
        display: flex;

        .el-form-item{
            flex: 1;
        }
    }
.map{
    .search{
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 1999;
    }
}
.app-container {
    section {
        .contentBox {
            background: #fff;
            border-radius: 8px;
            padding: 0px 24px 20px;
            min-width: 900px;
            min-height: calc(100vh - 165px );
            .title {
                line-height: 70px;
                font-size: 18px;
                font-weight: 600;
                color: #383b40;
                .el-icon-close {
                    cursor: pointer;
                }
            }
        }
        .content {
            max-width:800px;
            height: 100%;
            .form {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }
        }
    }
}
::v-deep{
    .el-input{
        width: 250px;
    }
    .el-input-number{
        .el-input{
            width: 100%;
        }
    }
    .el-icon-circle-plus-outline,.el-icon-remove-outline{
        color: #999;
        font-size: 26px;
        margin: 0 5px;
    }
     .el-icon-circle-plus-outline{
        margin-left: 20px;
    }
    .el-icon-remove-outline{
        color: #f00;
    }
    .el-form-item__content{
        display: flex;
        align-items: center;
    }
    .el-date-editor{
        width: 250px;
        // margin-right: 20px;
    }
}
</style>